<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="/static/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>队伍考核-查看打分</title>
    <link href="${ctxStatic}/layui/css/layui.css" rel="stylesheet"/>
    <link href="${ctxStatic}/css/kpiui.css" rel="stylesheet"/>
    <script src="${ctxStatic}/js/jquery-1.8.3.min.js?v=2.0" type="text/javascript"></script>
    <script src="${ctxStatic}/layui/layui.all.js" type="text/javascript"></script>
    <script src="${ctxStatic}/js/common.js" type="text/javascript"></script>


    <style>
        .layui-table-view .layui-table-header th {
            padding: 0
        }

        .layui-table-view {
            margin: 0 0 10px 0
        }


    </style>
</head>
<body>

<div class="tabregion">
    <div class="serchcontent">
        <div class="search">
            <div class="layui-form">
                <table>
                    <tr>
                        <td class="td_select">
                            <select id="year" placeholder="年份" lay-filter="year">

                            </select>
                            <input type="hidden" id="hidyear" value="${year }">
                        </td>
                        <td class="td_select month">
                            <select id="month" lay-filter="month">
                                <option value="1">1月</option>
                                <option value="2">2月</option>
                                <option value="3">3月</option>
                                <option value="4">4月</option>
                                <option value="5">5月</option>
                                <option value="6">6月</option>
                                <option value="7">7月</option>
                                <option value="8">8月</option>
                                <option value="9">9月</option>
                                <option value="10">10月</option>
                                <option value="11">11月</option>
                                <option value="12">12月</option>
                            </select>
                            <input type="hidden" id="hidmonth" value="${month}">
                        </td>
                        <td class="td_select  quarter" style="display: none">
                            <select id="quarter" lay-filter="quarter">
                                <option value="1">一季度</option>
                                <option value="2">二季度</option>
                                <option value="3">三季度</option>
                                <option value="4">四季度</option>

                            </select>

                        </td>
                        <td class="td_select month template">
                            <select id="template" lay-filter="templateId">

                            </select>
                            <input type="hidden" id="templateId" value="${templateId}">
                        </td>
                        <td class="td_select">
                            <select id="type" lay-filter="type">
                                <option value="m">月</option>
                                <option value="q">季度</option>
                                <option value="y">年</option>

                            </select>

                        </td>
                        <td style="text-align: center;width:250px">
                            <button class="button" onclick="search()"><img
                                    src="${ctxStatic}/images/button/chaxun.png" style="width:20px">查询
                            </button>
                            <button class="button" onclick="addTitle()">
                                保存
                            </button>
                            <button class="button" onclick="exportWord()">导出</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <table nostyle="1" style="display: none" class="titleContent">
        <tr style="text-align: center">
            <th colspan="4" style="text-align: center">
                <input id="title" style=" margin: 10px; width: 1000px; height: 34px;    color: rgba(255,255,255,0.80);
    background: #2A68A6;
    border: 1px solid #589DF5;" placeholder="请输入标题">


            </th>

        </tr>
    </table>
    <div>

        <iframe id="lookPage"
                style="width: 100%;  display: none; min-height: 530px ;border: 0px"></iframe>
    </div>
</div>
</body>
<script>
    function getDate() {
        var str = "";
        var value = $('#type').val();
        str = $('#year').val() + ",";
        if (value == "y") {
            str += "1,y"

        } else if (value == 'm') {
            str += $('#month').val() + ",m"
        } else {

            str += $('#quarter').val() + ",q"
        }
        return str;
    }


    function search() {
        var type = $('#type').val();
        var month = new Date().getMonth();
        var str = "";
        if (type == "y") {

            str = $("#year").val() + "年";
        }
        if (type == "m") {

            str = $('#month').val() + "月";
        }
        if (type == 'q') {
            str = $('#quarter').val() + "季度"

        }


        var title = "房山分局队伍管理工作" + str + "考评表(机关单位/派出所)"

        var templateId = $("#template").val();
        if ($('#type').val() != 'm') {
            templateId = 0;
        } else {
            if (templateId == "" || templateId == null)
                templateId = 0
        }
        var str = getDate();
        $('#lookPage').show();
        $('#lookPage').attr('src', 'look?templateid=' + templateId + "&str=" + str)

        $('.titleContent').show();


        $.ajax({
            type: "POST",
            url: "get_title",
            data: {templateId: templateId, str: str},
            beforeSend: function (XHR) {

            },
            success: function (data) {
                data = eval('(' + data + ')');
                if (data.length > 0) {

                    $("#title").val(data[0].title);

                } else {
                    $('#title').val(title);

                }

            },
            complete: function (XHR) {

            },
            error: function () {

            }
        });

    }

    function exportWord() {
        var templateId = $("#template").val();
        if ($('#type').val() != 'm') {
            templateId = 0;
        } else {
            if (templateId == "" || templateId == null)
                templateId = 0
        }
        var str = getDate();
        //
        // top.mylayui.open({
        //     type: 2,
        //     title: '业务考核下载',
        //     shadeClose: true,
        //     shade: 0.5,
        //     area: ['1px', '1px'],
        //     content: 'teamass/export?templateid=' + templateId + "&str=" + str
        // });
        // mylayui.closeAll();
        window.open('./export?templateid=' + templateId + "&str=" + str)

    }


    function addTitle() {
        var templateId = $("#template").val();
        $.ajax({
            type: "POST",
            url: "add_title",
            data: {title: $('#title').val(), templateId: templateId, str: getDate()},
            beforeSend: function (XHR) {

            },
            success: function (data) {
                layer.msg('保存成功', {icon: 1})
            },
            complete: function (XHR) {

            },
            error: function () {

            }
        });

    }


    $(function () {


        getYearData('year');
        var mongth = new Date().getMonth();


        $('#month').val(mongth);
        var form;
        var year = new Date().getFullYear();
        layui.use('form', function () {
            form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            form.render();

            var node = $('.template');
            node.find('.layui-select-title').css('width', '300px');
        });
        form.on('select(type)', function (data) {
            if (data.value == 'y') {
                $('.month').hide();
                $('.quarter').hide();

            } else if (data.value == 'm') {

                $('.month').show();
                $('.quarter').hide();
            } else {
                $('.month').hide();
                $('.quarter').show();
            }

        })


        form.on('select(month)', function (data) {
            // $('#monthValue').text(data.value);
            var begintime = $('#year').val() + '-' + data.value;
            $.ajax({
                type: "POST",
                url: "gettemplatebybegin",
                data: {begintime: begintime},
                beforeSend: function (XHR) {

                },
                success: function (data) {
                    data = eval('(' + data + ')');

                    $("#template").find("option").remove();

                    for (var i = 0; i < data.data.length; i++) {
                        var element = data.data[i]

                        $("#template").append("<option value=" + element.templateid + ">" + element.templatename + "</option>");

                    }
                    layui.use('form', function () {
                        form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                        form.render();

                        var node = $('.template');
                        node.find('.layui-select-title').css('width', '300px');
                    });
                },
                complete: function (XHR) {

                },
                error: function () {

                }
            });
        });

        form.on('select(year)', function (data) {
            // $('#monthValue').text(data.value);
            var begintime = data.value + '-' + $('#month').val();
            $.ajax({
                type: "POST",
                url: "gettemplatebybegin",
                data: {begintime: begintime},
                beforeSend: function (XHR) {

                },
                success: function (data) {
                    data = eval('(' + data + ')');

                    $("#template").find("option").remove();

                    for (var i = 0; i < data.data.length; i++) {
                        var element = data.data[i]

                        $("#template").append("<option value=" + element.templateid + ">" + element.templatename + "</option>");

                    }
                    layui.use('form', function () {
                        form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                        form.render();

                        var node = $('.template');
                        node.find('.layui-select-title').css('width', '300px');
                    });
                },
                complete: function (XHR) {

                },
                error: function () {

                }
            });
        });

        $.ajax({
            type: "POST",
            url: "gettemplatebybegin",
            data: {begintime: new Date().getFullYear()+"-"+new Date().getMonth()+1},
            beforeSend: function (XHR) {

            },
            success: function (data) {
                data = eval('(' + data + ')');

                $("#template").find("option").remove();

                for (var i = 0; i < data.data.length; i++) {
                    var element = data.data[i]

                    $("#template").append("<option value=" + element.templateid + ">" + element.templatename + "</option>");

                }
                layui.use('form', function () {
                    form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                    form.render();

                    var node = $('.template');
                    node.find('.layui-select-title').css('width', '300px');
                });
                search();
            },
            complete: function (XHR) {

            },
            error: function () {

            }
        });



    })

</script>
</html>